<template>
    <div class="share-content">
       <!-- 分享： 微信/QQ/新浪 -->
        <div class="share-btns">
            <span class="title">分享至</span>
            <a class="wechat" title="分享到微信" @click="visible = true"></a>
            <a class="qzone" :href="qzonePath" title="分享到QQ空间" target="_blank"></a>
            <a class="weibo" :href="weiboPath" title="分享到新浪微博" target="_blank"></a>
        </div>

        <el-dialog
            class="qrcode-dialog"
            title="分享到微信朋友圈"
            :visible.sync="visible"
            width="270px"
            center>
            <div class="qrcode-img">
                <template>
                    <vue-qr ref="Qrcode" :text="wapPath" :margin="10" :size="200" :dotScale="qrCodeConfig.dotScale" :colorDark="qrCodeConfig.colorDark"></vue-qr>
                </template>
            </div>
            <p>打开微信，点击底部的“发现”，</p>
            <p>使用“扫一扫”即可将网页分享至朋友圈。</p>  
            <p style="display:none;">{{wapPath}}</p>
        </el-dialog>
    </div>
</template>
<script>
import VueQr from 'vue-qr'
export default {
    components: {
         VueQr
    },
    props: {
        wapPath: {
            require:true,
            type: String,
            default: ""
        },
    },
    data() {
        return {
            platformName:'',
            encodeUrl:'',
            encodeWapUrl:'',
            qrCodeConfig: {
                dotScale: 0.9,
                colorDark: '#000'
            },
            visible:false
        };
    },
    created(){
        this.platformName = sessionStorage.getItem('siteTitle')
        this.encodeUrl =  encodeURIComponent(window.location.href);
        this.encodeWapUrl = encodeURIComponent(this.wapPath);
        // 各类分享，跳转传参的模板
        // let templates = {
        //     qzone: 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{URL}}&title={{TITLE}}&desc={{DESCRIPTION}}&summary={{SUMMARY}}&site={{SOURCE}}&pics={{IMAGE}}',
        //     qq: 'http://connect.qq.com/widget/shareqq/index.html?url={{URL}}&title={{TITLE}}&source={{SOURCE}}&desc={{DESCRIPTION}}&pics={{IMAGE}}&summary="{{SUMMARY}}"',
        //     weibo: 'https://service.weibo.com/share/share.php?url={{URL}}&title={{TITLE}}&pic={{IMAGE}}&appkey={{WEIBOKEY}}',
        //     wechat: 'javascript:',
        //     douban: 'http://shuo.douban.com/!service/share?href={{URL}}&name={{TITLE}}&text={{DESCRIPTION}}&image={{IMAGE}}&starid=0&aid=0&style=11',
        //     linkedin: 'http://www.linkedin.com/shareArticle?mini=true&ro=true&title={{TITLE}}&url={{URL}}&summary={{SUMMARY}}&source={{SOURCE}}&armin=armin',
        //     facebook: 'https://www.facebook.com/sharer/sharer.php?u={{URL}}',
        //     twitter: 'https://twitter.com/intent/tweet?text={{TITLE}}&url={{URL}}&via={{ORIGIN}}',
        //     google: 'https://plus.google.com/share?url={{URL}}'
        // };
    },
    computed: {
        qzonePath(){
            return `http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${this.encodeUrl}&title=${this.platformName}&desc=${this.platformName}pc端浏览地址：${this.encodeUrl};手机端浏览地址：${this.encodeWapUrl}`
        },
        weiboPath(){
            return `https://service.weibo.com/share/share.php?url=${this.encodeUrl}&title=${this.platformName}`
        }
    },
};
</script>
<style lang="scss">
.share-content{
    display: inline-block;
    .share-btns{
        display: flex;
        justify-content: center;
        .title {
            font-size: 14px;
            line-height: 20px;
            margin-right: 5px;
        }
        a{
            width: 20px;
            background-image: url("../../../public/images/ipng.png");
            background-repeat: no-repeat;
            margin: 0 5px;
        }
        .wechat{
            height: 17px;
            background-position: -118px -782px;
            &:hover{
                background-position: -88px -782px;
            }
        }
        .qzone{
            height: 20px;
            background-position: -659px -518px;
            &:hover{
                background-position: -60px -782px;
            }            
        }
        .weibo{
            height: 16px;
            background-position: -178px -782px;
            &:hover{
                background-position: -148px -782px;
            }            
        }        
    }
    .qrcode-dialog{
        .el-dialog--center .el-dialog__body{
            padding: 0 25px 30px;
            text-align: center;
        }
        p{
            line-height: 18px;
            font-size: 12px;
        }
    }
}
</style>
